import React, { Component } from 'react'
import Class from "classnames"
import {Range} from "immutable"


export default class SimplePageComponent extends Component {

  // page_number starts from 1
  ToPage(event, page_number) {
    event.preventDefault();
    console.log(page_number)
    this.props.toPageFromParent(event, page_number);
  }

  render() {
    const { pages, page } = this.props;

    return (

      <div>
        <h5>Component: Simple Page Component</h5>
        <h6>(Click the Arrow to Load)</h6>

        <nav>

          <ul className="pagination">

            <li className={Class({disabled: page == 1})}>
              <a href={"#"}
                onClick={event => this.ToPage(event, page - 1)}
                title={`To Previous Page`}>
                <span>&laquo;</span>
              </a>
            </li>


            { 
              Range(1,pages+1).map ( ( page_pos ) => {

                  return (
                    <li key={page_pos} className={Class({active: page == page_pos})}>
                      <a href={"#"}
                        onClick={event => this.ToPage(event, page_pos)}
                        title={`To page ${page_pos}`}>
                        {page_pos}
                      </a>
                    </li>
                  )

                }
              )
      
            }


            <li className={Class({disabled: page == pages })}>
              <a href={"#"}
                onClick={event => this.ToPage(event, page + 1)}
                title={`To Next Page`}>
                <span>&raquo;</span>
              </a>
            </li>

          </ul>

        </nav>

      </div>
      
    )
  }
}


